第二十二天：處理 API 請求

網頁開發中與後端進行數據交互通常是通過 API 請求來實現的。API（應用程序接口）允許我們從服務器獲取數據或提交數據，並在客戶端進行處理。

API 請求的基本流程

在 JavaScript 中，我們主要使用兩種方式來發送 API 請求：

1. XMLHttpRequest：較舊的方式，現在較少使用。
2. fetch API：現代的方式，支持 Promise 和 async/await，使用簡單且靈活。

今天我們將重點介紹 fetch 方法，它是現代瀏覽器中處理 HTTP 請求的標準方式。

1. fetch 基本用法

fetch 函數允許我們向指定的 URL 發送 HTTP 請求，並以 Promise 的方式返回響應。以下是基本用法：

fetch('https://api.example.com/data')
.then(response => {
if (!response.ok) {
throw new Error('Network response was not ok');
}
return response.json(); // 將響應轉換為 JSON 格式
})
.then(data => {
console.log("接收到的數據：", data); // 處理接收到的數據
})
.catch(error => {
console.error("發生錯誤：", error); // 捕捉錯誤並進行處理
});

說明：

• fetch 方法的第一個參數是要請求的 URL。
• response.ok 用來檢查 HTTP 請求是否成功。
• response.json() 將伺服器返回的 JSON 格式數據轉換為 JavaScript 對象。
• .catch 用來捕捉請求過程中的錯誤，例如網絡問題或無法解析的數據。

2. 使用 async/await 發送請求

使用 async/await 可以讓代碼看起來更加簡潔和直觀。這是 fetch 配合 async/await 的用法：

async function getData() {
try {
let response = await fetch('https://api.example.com/data');

if (!response.ok) {
  throw new Error('Network response was not ok');
}

let data = await response.json(); // 等待 JSON 數據解析
console.log("接收到的數據：", data);

} catch (error) {
console.error("發生錯誤：", error);
}
}

getData();

說明：

• await 等待 fetch 請求完成，並返回結果。這讓代碼不會馬上繼續執行，而是等待 API 返回響應。
• try/catch 用來捕捉和處理運行時錯誤，特別是網絡錯誤或數據解析錯誤。

3. 發送 POST 請求

除了 GET 請求，我們還可以使用 fetch 發送 POST 請求來提交數據。這需要指定請求的方法和請求體：

async function postData(url = '', data = {}) {
const response = await fetch(url, {
method: 'POST', // 使用 POST 方法
headers: {
'Content-Type': 'application/json' // 設置內容類型
},
body: JSON.stringify(data) // 將數據轉換為 JSON 字符串
});

if (!response.ok) {
throw new Error('Network response was not ok');
}

return response.json(); // 返回解析後的數據
}

// 調用函數並提交數據
postData('https://api.example.com/submit', { name: 'John', age: 30 })
.then(data => {
console.log("成功提交數據：", data);
})
.catch(error => {
console.error("提交失敗：", error);
});

說明：

• 我們在 fetch 請求中設置了 method: 'POST' 來告訴伺服器我們要提交數據。
• 使用 headers 設置請求的內容類型為 JSON。
• 在 body 中將數據轉換為 JSON 格式，然後提交。

4. 處理 API 請求中的錯誤

在處理 API 請求時，有時會遇到網絡問題、伺服器錯誤、數據格式不正確等情況。因此，進行錯誤處理是必不可少的。可以結合 try/catch 和 response.ok 檢查來處理這些錯誤。

範例：

async function fetchData() {
try {
let response = await fetch('https://api.example.com/data');

if (!response.ok) {
  throw new Error('Server responded with an error');
}

let data = await response.json();
console.log("數據獲取成功：", data);

} catch (error) {
console.error("API 請求失敗：", error);
}
}

fetchData();